<template>
    <transition name="modal">
        <div class="Modal">
            <div class="header">
                <gy-button class="close" font-name="icon-icon_act_open" @click="$emit('close')"/>
                {{title}}
            </div>
            <div class="container">
                <slot name="content"></slot>
            </div>
            <div class="bottom">
                <div class="sure" @click="$emit('sure')">确定</div>
            </div>
        </div>
    </transition>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import GyIcon from "@/components/GyIcon.vue";
import GyButton from "@/components/GyButton.vue";
@Component({
    name: 'Modal',
    components: {GyButton, GyIcon}
})
export default class extends Vue {
    @Prop()
    private title?: string;
}
</script>

<style scoped lang="less">
.Modal {
    position: fixed;
    background-color: white;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, .5);
    overflow: auto;
    & .header {
        padding: 0.2rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 0.32rem;
        font-weight: 600;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10;
        background-color: white;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                180deg,
                transparent 61%,
                rgba(0, 0, 0, .3) 100%
            );
        }
        & .close {
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 300;
            color: #3B83FF;
            font-size: 0.28rem;
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.74rem;
        background-color: white;
        z-index: 10;
        & .sure {
            position: absolute;
            bottom: 0.4rem;
            left: 0.6rem;
            right: 0.6rem;
            height: 1.0rem;
            line-height: 1.0rem;
            background-color: #3B83FF;
            color: white;
            font-size: 0.32rem;
            border-radius: 0.1rem;
            overflow: hidden;
            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
            }
            &:active {
                &:after {
                    background-color: rgba(255, 255, 255, .2);
                }
            }
        }
    }
    & .container {
        padding: 1.0rem 0.6rem 1.8rem 0.6rem;
    }
}
.modal-enter-active {
    transition: all .3s ease;
}
.modal-leave-active {
    transition: all .3s ease;
}
.modal-enter, .modal-leave-to {
    transform: translateY(100%);
}
</style>
